<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>书写三角形</title>
    <style>
      *{
        padding:0;
        margin:0;
      }
     .imgage{
        position: relative;
        width:1050px;
         margin: 0 auto;
        
      }
      .imgage img {
        width:100%;
        height:100%; 
      }
      .imgage .name{
        position: absolute;
        top:41%;
        left:17%;
      }
      .startTime{
      	position:absolute;
        top:41%;
        left:34%;
      }
       .endTime{
      	position:absolute;
        top:41%;
        left:48%;
      }
      .title{
      	position:absolute;
        top:41%;
        left:67%;
      }
      .grade{
      	position:absolute;
        top:48%;
        left:62%;
      }
       .code{
      	position:absolute;
        top:65.3%;
        left:29%;
      }
       .year{
      	position:absolute;
        top:78%;
        left:68%;
      }
       .month{
      	position:absolute;
        top:78%;
        left:77%;
      }
       .data{
      	position:absolute;
        top:78%;
        left:83%;
      }
    </style>
</head>
<body>
    <div class="imgage">
      <img src="stitic/img/credential.jpg">
      <span class="name">胡必胜</span>
      <span  class="startTime">1111-12-12</span>
      <span class="endTime">1211-12-12</span>
      <span class="title">胡必胜123</span>
      <span class="grade">胡必胜12</span>
      <span class="code">胡必胜1212213XXXX</span>
      <span class="year">1212</span>
      <span class="month">12</span>
      <span class="data">312</span>
  	</div>
</body>
</html>